<template>
  <div class="iconInfo" :class="'skin'+status">
    <div class="iconImg" ref="iconImg">
    </div>
  </div>
</template>

<script>
import { gsap } from 'gsap'

export default {
  name: 'icon',
  props: {
    status: {
      type: Number,
      default () {
        return 1
      }
    }
  },
  mounted () {
    gsap.to(this.$refs.iconImg, {
      y: '+=5', // 在y轴上移动20px
      repeat: -1, // 无限重复
      yoyo: true, // 在每次迭代结束时反向动画
      duration: 1, // 动画持续时间为0.5秒
      ease: 'power1.inOut' // 使用'inOut'缓动函数
    })
  }
}
</script>

<style lang="scss" scoped>
.iconInfo {
  width: 90px;
  height: 96%;
  background: url("./assets/skin1/dizuoAnimate.png") center bottom no-repeat;
  background-size: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;

  .iconImg {
    width: 24px;
    height: 24px;
    background: url("./assets/skin1/icon.png") center no-repeat;
    background-size: 100% 100%;
    margin-top: -5px;
  }
}

.iconInfo.skin2 {
  background: url("./assets/skin2/dizuoAnimate.png") center bottom no-repeat;
  background-size: 100%;

  .iconImg {
    width: 24px;
    height: 29px;
    background: url("./assets/skin2/icon.png") center no-repeat;
    background-size: 100% 100%;
    margin-top: -5px;
  }
}
.iconInfo.skin3 {
  background: url("./assets/skin3/dizuoAnimate.png") center bottom no-repeat;
  background-size: 100%;

  .iconImg {
    width: 24px;
    height: 29px;
    background: url("./assets/skin3/icon.png") center no-repeat;
    background-size: 100% 100%;
    margin-top: -5px;
  }
}
</style>
